<template>
  <el-header>
    <el-menu
        class="el-menu-demo"
        mode="horizontal"
        :ellipsis="false"
        @click="router.push('/manager')"
    >
      <el-menu-item index="0"><el-icon><HomeFilled /></el-icon>健康打卡管理系统</el-menu-item>
      <div class="flex-grow" />
      <el-sub-menu index="2">
        <template #title>小工具</template>
        <el-menu-item index="2-2" @click="router.push('/manager/analysis')">分析表</el-menu-item>
      </el-sub-menu>
      <el-menu-item style="color: red" @click="router.push('/')"   index="5">
        <el-icon><ArrowLeftBold /></el-icon>
        <template #title  >返回主页</template>
      </el-menu-item>


    </el-menu>
  </el-header>
  <div class="common-layout">
    <el-container>
      <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          @open="handleOpen"
          @close="handleClose"
      >

        <el-menu-item index="2"    @click="router.push('/manager')">
          <el-icon><Burger /></el-icon>
          <template #title>食物管理</template>
        </el-menu-item>
        <el-menu-item  index="1" style="margin-top: 30px"  @click="router.push('/manager/person')">
          <el-icon><User /></el-icon>
          <template #title>用户管理</template>
        </el-menu-item>

        <el-menu-item style="margin-top: 30px"  @click="router.push('/manager/sports')" index="3">
          <el-icon><Football /></el-icon>
          <template #title>运动管理</template>
        </el-menu-item>
        <el-menu-item style="margin-top: 30px" @click="router.push('/manager/feedback')" index="4">
          <el-icon><Message /></el-icon>
          <template #title>用户反馈</template>
        </el-menu-item>
        <el-menu-item style="margin-top: 30px;color: red" @click="router.push('/')"   index="5">
          <el-icon><SwitchButton /></el-icon>
          <template #title  >退出登录</template>
        </el-menu-item>
      </el-menu>
      <el-main >
        <div style="z-index: 1">
          <router-view v-slot="{ Component }">
            <component :is="Component" />
          </router-view>
        </div>
      </el-main>
    </el-container>
  </div>

</template>

<script lang="ts" setup >
import router from "../router";
import { ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

const isCollapse = ref(false)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}


const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style >


a{
  text-decoration: none;
}
.normal{
  margin-left: 30px;
  margin-top: 40px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
   width: 200px;
  font-size: 30px;
   min-height: 400px;
  margin-top: 40px;
 }
.flex-grow {
  flex-grow: 1;
}
</style>
